<!-- 我的消息 页面 -->
<template>
	<view>
		<u-empty class="tip" text="暂未登陆,内容为空" mode="permission" v-if="!vuex_token"></u-empty>
		<view class="status-container-box" v-else>
			<!-- 后续循环渲染 status-item 即可，一个该标签组即一个聊天项-->
			<block v-for="(conversationItem, i) in conversationList" :key="i"><status-item :conversationItem="conversationItem"></status-item></block>
		</view>
	</view>
</template>

<script>
import TIM from 'tim-wx-sdk'; // 微信小程序环境请取消本行注释，并注释掉 import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin'; // 使用前请将 IM SDK 升级到v2.9.2或更高版本

// 创建 SDK 实例，TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
let options = {
	SDKAppID: 1400622577 // 接入时需要将0替换为您的即时通信应用的 SDKAppID
};
let tim = TIM.create(options); // SDK 实例通常用 tim 表示
export default {
	data() {
		return {
			// 会话列表
			conversationList: []
		};
	},
	async onShow() {
		if(!this.vuex_SDKAppID) return
		this.getMessageList(); // 获取会话列表
	},
	// 下拉事件
	async onPullDownRefresh() {
		await this.getMessageList(); // 获取会话列表
		uni.stopPullDownRefresh();
		this.$u.toast('消息列表已刷新');
	},
	mounted() {
		// 监听收到推送的单聊、群聊、群提示、群系统通知的新消息
		tim.on(TIM.EVENT.MESSAGE_RECEIVED, this.$onMessageReceived, this);
	},
	// 在此解除相关的事件绑定
	destroyed() {
		// 一定要解除相关的事件绑定
		tim.off(TIM.EVENT.MESSAGE_RECEIVED, this.$onMessageReceived);
	},
	methods: {
		// 处理在消息页面监听收到了消息的情况
		$onMessageReceived(message) {
			// console.log('监听到的消息', message);
			// 如果接收消息者不是当前律师或者发送的是通知类消息则不处理
			if (message.data[0].to !== this.vuex_account || message.data[0].from === '_consult_') return;
			// 判断发送消息的客户是否已经在当前会话列表中
			let index = this.conversationList.findIndex(item => item.toMessageUserID === message.data[0].from);
			// 已经在当前会话列表中时
			if (index !== -1) {
				// 处理这个用户发送过来的消息
				// 会话数据对象
				let conversationItem = {
					avatar: message.data[0].avatar, // /static/demoimg/avatar-min.png
					lawyer_name: message.data[0].nick,
					toMessageUserID: message.data[0].from, // 用户的 IM 接收消息的 ID
					text: '', // 最后一条消息的内容
					// 会话余额为空则已结束=> isEnd = true
					isEnd: false,
					// 消息已读则为灰色 0 ，消息未读则为红色 1
					isNumber: 1, // 如果 unreadCount 为 0 则所有消息均为已读
					last_time: this.$u.utils.formatDate(message.data[0].time) // 接收到此消息的时间
				};
				// 判断最后一条消息是文字还是图片
				if (message.data[0].type === 'TIMTextElem') {
					conversationItem.text = message.data[0].payload.text;
				} else if (message.data[0].type === 'TIMImageElem') {
					conversationItem.text = '[图片]';
				}
				// 然后把这个会话数据对象更新到会话列表中
				this.conversationList.splice(index, 1);		// 先删除掉这个记录
				this.conversationList.splice(0, 0, conversationItem);		// 再把这个会话添加到最开头
			} else {
				// 如果这个消息对象原本不在当前会话数据列表中，则将这个新数据对象添加到列表最开头
				// 处理这个用户发送过来的消息
				// 会话数据对象
				let conversationItem = {
					avatar: message.data[0].avatar, // /static/demoimg/avatar-min.png
					lawyer_name: message.data[0].nick,
					toMessageUserID: message.data[0].from, // 用户的 IM 接收消息的 ID
					text: '', // 最后一条消息的内容
					// 会话余额为空则已结束=> isEnd = true
					isEnd: false,
					// 消息已读则为灰色 0 ，消息未读则为红色 1
					isNumber: 1, // 如果 unreadCount 为 0 则所有消息均为已读
					last_time: this.$u.utils.formatDate(message.data[0].time) // 接收到此消息的时间
				};
				// 判断最后一条消息是文字还是图片
				if (message.data[0].type === 'TIMTextElem') {
					conversationItem.text = message.data[0].payload.text;
				} else if (message.data[0].type === 'TIMImageElem') {
					conversationItem.text = '[图片]';
				}
				// 在会话列表的开头添加上这个新会话
				this.conversationList.splice(0, 0, conversationItem);
			}
		},
		// 获取全量的会话列表
		async getMessageList() {
			let res = await tim.getConversationList();
			console.log(res);
			this.conversationList = [];
			res.data.conversationList.forEach(CItem => {
				if (CItem.userProfile.userID === '_consult_') return; // 把用户发通知的这个记录的剔除掉，不需要添加到会话列表中
				// 会话数据对象
				let conversationItem = {
					avatar: CItem.userProfile.avatar, // /static/demoimg/avatar-min.png
					lawyer_name: CItem.userProfile.nick,
					toMessageUserID: CItem.userProfile.userID, // 用户的 IM 接收消息的 ID
					text: '', // 最后一条消息的内容
					// 会话余额为空则已结束=> isEnd = true
					isEnd: false,
					// 消息已读则为灰色 0 ，消息未读则为红色 1
					isNumber: CItem.unreadCount ? 1 : 0, // 如果 unreadCount 为 0 则所有消息均为已读
					last_time: this.$u.utils.formatDate(CItem.lastMessage.lastTime) // 最后一条消息的时间
				};
				// this.conversationItem.id += 1;
				// this.conversationItem.avatar = CItem.userProfile.avatar		// 取到用户的头像
				// this.conversationItem.toMessageUserID = CItem.userProfile.userID		// 取到用户的 userID
				// this.conversationItem.lawyer_name = CItem.userProfile.nick; // 用户姓名
				// this.conversationItem.last_time = this.$u.utils.formatDate(CItem.lastMessage.lastTime);

				// 判断最后一条消息是文字还是图片
				if (CItem.lastMessage.type === 'TIMTextElem') {
					conversationItem.text = CItem.lastMessage.payload.text;
				} else if (CItem.lastMessage.type === 'TIMImageElem') {
					conversationItem.text = '[图片]';
				}

				// 然后把这个会话数据对象 push 到会话列表中
				this.conversationList.push(conversationItem);
			});
			// console.log('当前会话列表', this.conversationList);
		}
	}
};
</script>

<style lang="scss">
.tip {
	width: 750rpx;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.status-container-box {
	background-color: $u-bg-color;
	min-height: 100vh;
	// #ifdef H5
	min-height: calc(100vh - 188rpx);
	// #endif
}
</style>
